<template>
  <div class="home-main">
    <TopInfo />
    <TodayWarning />
    <div class="map">
      <MapChart />
    </div>
  </div>
</template>
<script>
import TopInfo from "./components/top-info.vue";
import TodayWarning from "./components/today-warning.vue";
import MapChart from "./components/map-chart.vue";

export default {
  name: "HomeMain",
  components: {
    TopInfo,
    TodayWarning,
    MapChart
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.home-main {
  padding: 0 40px;
  display: flex;
  flex-direction: column;
}

.today-warning {
  margin-top: 27px;
}

.map {
  flex: 1;
  background-image: url("~@/assets/images/home/map-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
</style>
